<template>
	<view class="mycheckbox" @tap="changeCheck" :style="{width: size,height: size}">
		<view class="noCheck" v-show="!check"></view>
		<image v-show="check" class="checkImg" src="/static/images/checkbox.png" mode=""></image>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {

			};
		},
		options: {},
		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			check: {
				type: [Boolean,Number],
				default: false
			},
			mychange: {
				type: Function,
			},
			size: {
				type: String,
				default: '26rpx'
			},
		},
		computed: {

		},
		mounted() {

		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			/**
			 * 跳转到指定页面
			 */
			changeCheck() {
				let value = !this.check;
				this.$emit("mychange", value);
			},

		}
	};
</script>
<style scoped lang="scss">
	.mycheckbox {
		position: relative;
		box-sizing: border-box;
		font-size: 0;
		overflow: hidden;
		border: 1px solid #464941;
		border-radius: 50%;

		.noCheck {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			// border: 1px solid #464941;
			box-sizing: border-box;
			border-radius: 50%;
			font-size: 0;
		}



		.checkImg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
			transform: scale(1.4);
		}
	}
</style>